<template>
  <div class="dashboard-container">
    <div class="page-header">
      <h1>🎯 萌愈戒烟日记</h1>
      <p>{{ timeGreeting }}</p>
    </div>

    <!-- 快速操作 -->
    <div class="quick-actions">
      <h2>快速操作</h2>
      <div class="actions-grid">
        <router-link to="/daily-record" class="action-card" @click="triggerCardAnimation">
          <div class="action-icon">📝</div>
          <h3>来写日记吧~ ✍️(◍•ᴗ•◍)</h3>
          <p>记录今天的心情和状态</p>
        </router-link>
        
        <router-link to="/craving-log" class="action-card urgent" @click="triggerCardAnimation">
          <div class="action-icon">🚨</div>
          <h3>有烟瘾了？快来戳我！(๑•̀ㅂ•́)و✧</h3>
          <p>快速记录烟瘾情况</p>
        </router-link>
        
        <router-link to="/health-tips" class="action-card" @click="triggerCardAnimation">
          <div class="action-icon">💡</div>
          <h3>获取建议 (◕‿◕)</h3>
          <p>查看健康戒烟建议</p>
        </router-link>
      </div>
    </div>

    <!-- 快速统计卡片 -->
    <div class="stats-grid">
      <div class="stat-card primary" :class="{ pulse: pulseAnimation.quitDays }">
        <div class="stat-icon">📅</div>
        <div class="stat-content">
          <h3>{{ animatedQuitDays }}</h3>
          <p>戒烟天数</p>
        </div>
        <div class="sparkle" v-if="pulseAnimation.quitDays">+1</div>
      </div>
      
      <div class="stat-card success" :class="{ pulse: pulseAnimation.moneySaved }">
        <div class="stat-icon">💰</div>
        <div class="stat-content">
          <h3>¥{{ animatedMoneySaved }}</h3>
          <p>节省金额</p>
        </div>
        <div class="sparkle" v-if="pulseAnimation.moneySaved">✓</div>
      </div>
      
      <div class="stat-card warning" :class="{ pulse: pulseAnimation.cigarettesNotSmoked }">
        <div class="stat-icon">🚭</div>
        <div class="stat-content">
          <h3>{{ animatedCigarettesNotSmoked }}</h3>
          <p>未吸香烟</p>
        </div>
        <div class="sparkle" v-if="pulseAnimation.cigarettesNotSmoked">✨</div>
      </div>
    </div>

    <!-- 最近成就 -->
    <div v-if="recentAchievement" class="recent-achievement">
      <h2>🏆 最新成就</h2>
      <div class="achievement-card">
        <div class="achievement-badge">🏆</div>
        <div class="achievement-content">
          <h3>{{ recentAchievement.name }}</h3>
          <p>{{ recentAchievement.description }}</p>
          <span class="achievement-date">{{ formatDate(recentAchievement.date) }}</span>
        </div>
        <div class="achievement-actions">
          <button class="share-button" @click="shareAchievement">分享 ✨</button>
        </div>
        <router-link to="/achievements" class="achievement-link">查看所有成就 →</router-link>
      </div>
    </div>

    <!-- 今日建议 -->
    <div class="daily-tip">
      <h2>💡 今日建议</h2>
      <div class="tip-card">
        <h3>{{ currentDailyTip.title }}</h3>
        <p>{{ currentDailyTip.content }}</p>
        <div class="tip-actions">
          <button class="useful-button" @click="markTipAsUseful">超有用哒！(๑•̀ㅂ•́)و✧</button>
        </div>
        <router-link to="/health-tips" class="tip-link">查看更多建议 →</router-link>
      </div>
    </div>
    
    <!-- 可爱的卡通助手形象 -->
    <div class="cute-assistant" @click="changeAssistantMessage" :class="assistantState">
      <div class="assistant-character">🐰</div>
      <div class="assistant-message">{{ assistantMessage }}</div>
      <div class="assistant-thought" v-if="assistantState === 'thinking'">💭</div>
      <div class="assistant-celebration" v-if="assistantState === 'celebrating'">🎉</div>
      <div class="assistant-sleep" v-if="assistantState === 'sleeping'">💤</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DashboardView',
  data() {
    return {
      quitDays: 6,
      moneySaved: 45.5,
      cigarettesNotSmoked: 120,
      achievementsCount: 1,
      // 动画数值
      animatedQuitDays: 0,
      animatedMoneySaved: 0,
      animatedCigarettesNotSmoked: 0,
      // 脉冲动画控制
      pulseAnimation: {
        quitDays: false,
        moneySaved: false,
        cigarettesNotSmoked: false
      },
      // 文案库
      dailyTipLibrary: [
        { title: '深呼吸缓解烟瘾', content: '当感到烟瘾时，尝试深呼吸10次。这能帮助你放松并减轻烟瘾的强度。你一定可以做到的！(๑•̀ㅂ•́)و✧' },
        { title: '饭后刷牙有助于抑制烟瘾', content: '饭后刷牙有助于抑制烟瘾哦！口腔的清新感会让你忘记香烟的味道。(◕‿◕)' },
        { title: '嚼口香糖替代吸烟', content: '今天试试用嚼口香糖来代替吸烟吧~ 既能缓解口腔寂寞，又能减少烟瘾。(◍•ᴗ•◍)' },
        { title: '喝水缓解烟瘾', content: '喝一杯冰水可以有效缓解烟瘾冲动！让冰凉的感觉占据你的口腔和喉咙。(๑•̀ㅂ•́)و✧' }
      ],
      achievementDescriptionLibrary: [
        '恭喜你踏上了成为戒烟勇者的伟大旅程！第一关，突破！',
        '坚持就是胜利，你正在创造奇迹！(๑•̀ㅂ•́)و✧',
        '看，你已经省下了这么多钱啦！超棒的~',
        '每一天不吸烟都是对自己的奖励！✨',
        '你正在变得更强大！(◕‿◕)'
      ],
      // 当前显示的文案
      currentDailyTip: {},
      recentAchievement: {
        name: '戒烟の初心者！',
        description: '',
        date: '2024-09-01'
      },
      // 助手消息库
      assistantMessages: [
        '加油哦！我相信你可以的！(๑•̀ㅂ•́)و✧',
        '每一天都是新的开始！✨',
        '你已经做得很好了！(◕‿◕)',
        '坚持就是胜利！(◍•ᴗ•◍)',
        '为自己感到骄傲吧！✨',
        '小小的改变，大大的进步！(๑•̀ㅂ•́)و✧',
        '你比昨天更棒了！(◕‿◕)'
      ],
      assistantMessage: '加油哦！我相信你可以的！(๑•̀ㅂ•́)و✧',
      assistantMessageIndex: 0,
      // 助手状态
      assistantState: 'normal', // normal, thinking, celebrating, sleeping
      assistantStateTimeout: null,
      // 数据加载状态
      dataLoaded: false
    }
  },
  
  computed: {
    timeGreeting() {
      const hour = new Date().getHours();
      if (hour < 5) return '凌晨好！还在努力吗？要注意休息哦~ (◕‿◕)';
      if (hour < 12) return '早上好！今天也是充满希望的一天！(๑•̀ㅂ•́)و✧';
      if (hour < 14) return '中午好！记得吃一顿健康的午餐。(◍•ᴗ•◍)';
      if (hour < 18) return '下午好！坚持就是胜利！(◕‿◕)';
      return '晚上好喵~ 今天也辛苦啦！快来盘点一下今天的战果吧！☆';
    }
  },
  
  methods: {
    formatDate(dateString) {
      return new Date(dateString).toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
      })
    },
    
    // 初始化动画数值
    initAnimations() {
      this.animateValue('animatedQuitDays', 0, this.quitDays, 1000);
      this.animateValue('animatedMoneySaved', 0, this.moneySaved, 1500);
      this.animateValue('animatedCigarettesNotSmoked', 0, this.cigarettesNotSmoked, 1200);
    },
    
    // 数字滚动动画
    animateValue(dataProperty, start, end, duration) {
      let startTimestamp = null;
      const step = (timestamp) => {
        if (!startTimestamp) startTimestamp = timestamp;
        const progress = Math.min((timestamp - startTimestamp) / duration, 1);
        const value = Math.floor(progress * (end - start) + start);
        this[dataProperty] = value;
        if (progress < 1) {
          window.requestAnimationFrame(step);
        } else {
          // 确保最终值精确
          this[dataProperty] = typeof end === 'number' && end % 1 !== 0 ? end.toFixed(1) : end;
          // 触发脉冲动画
          this.triggerPulseAnimation(dataProperty);
        }
      };
      window.requestAnimationFrame(step);
    },
    
    // 触发脉冲动画
    triggerPulseAnimation(property) {
      const mapping = {
        'animatedQuitDays': 'quitDays',
        'animatedMoneySaved': 'moneySaved',
        'animatedCigarettesNotSmoked': 'cigarettesNotSmoked'
      };
      
      const key = mapping[property];
      if (key) {
        this.pulseAnimation[key] = true;
        setTimeout(() => {
          this.pulseAnimation[key] = false;
        }, 1000);
      }
    },
    
    // 随机选择文案
    selectRandomTip() {
      const randomIndex = Math.floor(Math.random() * this.dailyTipLibrary.length);
      this.currentDailyTip = this.dailyTipLibrary[randomIndex];
    },
    
    // 随机选择成就描述
    selectRandomAchievementDescription() {
      const randomIndex = Math.floor(Math.random() * this.achievementDescriptionLibrary.length);
      this.recentAchievement.description = this.achievementDescriptionLibrary[randomIndex];
    },
    
    // 切换助手消息
    changeAssistantMessage() {
      // 清除之前的定时器
      if (this.assistantStateTimeout) {
        clearTimeout(this.assistantStateTimeout);
      }
      
      // 触发点击动画
      this.assistantState = 'clicked';
      setTimeout(() => {
        this.assistantState = 'normal';
      }, 300);
      
      this.assistantMessageIndex = (this.assistantMessageIndex + 1) % this.assistantMessages.length;
      this.assistantMessage = this.assistantMessages[this.assistantMessageIndex];
      
      // 5秒后进入睡眠状态
      this.assistantStateTimeout = setTimeout(() => {
        this.assistantState = 'sleeping';
      }, 5000);
    },
    
    // 分享成就
    shareAchievement() {
      alert('成就已复制到剪贴板！你可以分享给朋友啦~ ✨');
      // 触发庆祝动画
      this.assistantState = 'celebrating';
      setTimeout(() => {
        this.assistantState = 'normal';
      }, 2000);
    },
    
    // 标记建议为有用
    markTipAsUseful() {
      alert('谢谢你的反馈！我们会继续为你提供有用的建议！(๑•̀ㅂ•́)و✧');
    },
    
    // 卡片点击动画
    triggerCardAnimation() {
      // 可以在这里添加卡片点击的反馈动画
      event.target.classList.add('card-clicked');
      setTimeout(() => {
        event.target.classList.remove('card-clicked');
      }, 300);
    }
  },
  
  mounted() {
    // 模拟数据加载
    setTimeout(() => {
      this.dataLoaded = true;
      this.selectRandomTip();
      this.selectRandomAchievementDescription();
      this.initAnimations();
      
      // 30秒后助手进入思考状态
      setTimeout(() => {
        this.assistantState = 'thinking';
      }, 30000);
    }, 300);
  },
  
  beforeUnmount() {
    if (this.assistantStateTimeout) {
      clearTimeout(this.assistantStateTimeout);
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background: linear-gradient(135deg, #faf0ff 0%, #f0f9ff 100%);
  position: relative;
  overflow: hidden;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

/* 背景装饰元素 */
.dashboard-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(255, 198, 255, 0.2) 3px, transparent 3px),
    radial-gradient(circle at 90% 40%, rgba(180, 248, 200, 0.2) 2px, transparent 2px),
    radial-gradient(circle at 40% 80%, rgba(255, 209, 220, 0.2) 4px, transparent 4px),
    radial-gradient(circle at 70% 15%, rgba(162, 210, 255, 0.2) 3px, transparent 3px),
    radial-gradient(circle at 20% 70%, rgba(255, 175, 204, 0.2) 2px, transparent 2px),
    radial-gradient(circle at 85% 25%, rgba(255, 209, 220, 0.2) 3px, transparent 3px);
  background-size: 200px 200px;
  z-index: 0;
}

.dashboard-container > * {
  position: relative;
  z-index: 1;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
  animation: slideInDown 0.8s ease-out;
}

.page-header h1 {
  color: #444444;
  margin-bottom: 10px;
  font-size: 28px;
  font-weight: 500;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.page-header p {
  color: #888888;
  font-size: 16px;
  font-weight: 400;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(5px);
  border-radius: 20px;
  padding: 25px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  border: 2px solid #A2D2FF;
  position: relative;
  overflow: hidden;
  animation: slideInUp 0.6s ease-out;
}

.stat-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #FFD1DC, #A2D2FF);
  border-radius: 0 0 20px 20px;
}

.stat-card:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.stat-card.primary {
  border: 2px solid #FFD1DC;
}

.stat-card.primary::after {
  background: linear-gradient(90deg, #FFC6FF, #FFD1DC);
}

.stat-card.success {
  border: 2px solid #B4F8C8;
}

.stat-card.success::after {
  background: linear-gradient(90deg, #B4F8C8, #FFC6FF);
}

.stat-card.warning {
  border: 2px solid #FFAFCC;
}

.stat-card.warning::after {
  background: linear-gradient(90deg, #FFAFCC, #FFD1DC);
}

.stat-icon {
  font-size: 32px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  border: 2px solid #A2D2FF;
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5), 0 4px 10px rgba(162, 210, 255, 0.3);
}

.stat-content h3 {
  font-size: 24px;
  font-weight: 500;
  color: #444444;
  margin: 0 0 5px 0;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
  animation: bounce 1s ease-in-out;
}

.stat-content p {
  color: #888888;
  margin: 0;
  font-size: 14px;
  font-weight: 300;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.quick-actions,
.daily-tip,
.recent-achievement {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(5px);
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border: 2px solid #A2D2FF;
  position: relative;
  overflow: hidden;
  animation: slideInUp 0.8s ease-out;
}

/* 给快速操作模块增加更明显的背景色 */
.quick-actions {
  background: rgba(240, 244, 255, 0.95);
  padding: 35px;
  animation-delay: 0.2s;
}

.quick-actions h2,
.daily-tip h2,
.recent-achievement h2 {
  color: #444444;
  margin-bottom: 25px;
  font-size: 24px;
  font-weight: 500;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.action-card {
  background: white;
  border: 2px dashed #CDB4DB;
  border-radius: 20px;
  padding: 25px;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  text-align: center;
  position: relative;
  overflow: hidden;
  animation: slideInUp 0.8s ease-out;
  animation-delay: 0.4s;
}

.action-card:hover {
  transform: translateY(-5px) scale(1.05);
  border: 2px solid #FFD1DC;
  box-shadow: 0 12px 30px rgba(255, 209, 220, 0.4);
}

.action-card.urgent {
  background: linear-gradient(145deg, #fff5f5, #ffffff);
  border: 2px dashed #FF6B6B;
}

.action-card.urgent:hover {
  border: 2px solid #FF5252;
  box-shadow: 0 12px 30px rgba(255, 107, 107, 0.4);
}

.action-card.card-clicked {
  transform: scale(0.95);
  transition: transform 0.1s ease;
}

.action-icon {
  font-size: 32px;
  margin-bottom: 15px;
}

.action-card h3 {
  color: #444444;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 500;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.action-card p {
  color: #888888;
  margin: 0;
  font-size: 14px;
  font-weight: 300;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.tip-card {
  background: linear-gradient(135deg, #A2D2FF 0%, #CDB4DB 100%);
  color: white;
  border-radius: 20px;
  padding: 25px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 8px 25px rgba(162, 210, 255, 0.4);
  animation-delay: 0.6s;
}

.tip-card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
  transform: rotate(30deg);
}

.tip-card h3 {
  color: white;
  margin-bottom: 15px;
  font-size: 20px;
  font-weight: 500;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
  position: relative;
}

.tip-card p {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 20px;
  line-height: 1.6;
  font-weight: 400;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
  position: relative;
}

.tip-actions {
  margin-bottom: 15px;
}

.useful-button {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.useful-button:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.useful-button:active {
  transform: scale(0.95);
}

.tip-link {
  color: white;
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  transition: border-color 0.3s ease;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
  position: relative;
}

.tip-link:hover {
  border-color: white;
}

.achievement-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 25px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border: 2px solid #B4F8C8;
  position: relative;
  overflow: hidden;
  animation-delay: 0.8s;
}

.achievement-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #B4F8C8, #CDB4DB);
}

.achievement-badge {
  font-size: 40px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #B4F8C8;
  color: white;
  border-radius: 50%;
  border: 2px solid #B4F8C8;
  position: relative;
  animation: float 3s ease-in-out infinite;
  box-shadow: 0 4px 10px rgba(180, 248, 200, 0.4);
}

.achievement-content {
  flex: 1;
}

.achievement-content h3 {
  color: #444444;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 500;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.achievement-content p {
  color: #888888;
  margin-bottom: 10px;
  font-weight: 400;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.achievement-date {
  color: #B4F8C8;
  font-size: 14px;
  font-weight: 500;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.achievement-actions {
  margin-right: 20px;
}

.share-button {
  background: #B4F8C8;
  border: none;
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(180, 248, 200, 0.3);
}

.share-button:hover {
  background: #94e8a8;
  transform: scale(1.05);
  box-shadow: 0 6px 15px rgba(180, 248, 200, 0.4);
}

.share-button:active {
  transform: scale(0.95);
}

.achievement-link {
  color: #B4F8C8;
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid rgba(180, 248, 200, 0.3);
  transition: border-color 0.3s ease;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.achievement-link:hover {
  border-color: #B4F8C8;
}

/* 可爱的卡通助手形象 */
.cute-assistant {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  animation: slideInUp 1s ease-out;
}

.assistant-character {
  font-size: 48px;
  animation: float 3s ease-in-out infinite;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
  transition: all 0.3s ease;
}

.cute-assistant.normal .assistant-character {
  animation: float 3s ease-in-out infinite;
}

.cute-assistant.clicked .assistant-character {
  animation: spin 0.5s ease;
}

.cute-assistant.thinking .assistant-character {
  animation: none;
}

.cute-assistant.celebrating .assistant-character {
  animation: bounce 1s ease infinite;
}

.cute-assistant.sleeping .assistant-character {
  animation: none;
  opacity: 0.7;
}

.assistant-message {
  background: white;
  border-radius: 20px;
  padding: 12px 20px;
  font-size: 14px;
  color: #444444;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 2px solid #FFD1DC;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
  font-weight: 400;
  position: relative;
  max-width: 200px;
  text-align: center;
  transition: all 0.3s ease;
  animation: fadeIn 0.5s ease;
}

.assistant-message::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 10px 10px 0;
  border-style: solid;
  border-color: #FFD1DC transparent transparent;
}

.assistant-thought,
.assistant-celebration,
.assistant-sleep {
  position: absolute;
  font-size: 24px;
  animation: float 2s ease-in-out infinite;
}

.assistant-thought {
  top: -30px;
  right: -10px;
}

.assistant-celebration {
  top: -40px;
  right: -20px;
  animation: bounce 1s ease infinite;
}

.assistant-sleep {
  top: -20px;
  left: -10px;
}

/* 动画效果 */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes bounce {
  0%, 20%, 60%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  80% {
    transform: translateY(-5px);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  }
}

@keyframes slideInUp {
  from {
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInDown {
  from {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 数字变化弹跳效果 */
.stat-content h3 {
  animation: bounce 1s ease-in-out;
}

/* 脉冲动画 */
.stat-card.pulse {
  animation: pulse 1s ease;
}

/* 闪烁动画 */
.sparkle {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  animation: sparkle 1s ease-out;
}

@keyframes sparkle {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: scale(1.5);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@media (max-width: 768px) {
  .dashboard-container {
    padding: 15px;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .actions-grid {
    grid-template-columns: 1fr;
  }
  
  .achievement-card {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }
  
  .page-header h1 {
    font-size: 24px;
  }
  
  .cute-assistant {
    bottom: 20px;
    right: 20px;
    transform: scale(0.8);
  }
}
</style>
```